<template>
    <fieldset>
        <legend>商品 </legend>
        <h1>商品:product</h1>
        <ul>
            <li v-for="item in this.productData" :key="item.id">
            <b>产品名称：{{ item.title }}</b>
            ----
            <b>价格：{{ item.price }}</b>
            ----
            <b>库存：{{ item.inventory }}</b>
            ----
            <button :disabled="item.inventory===0" @click="addCart(item)">
                +加入购物车
            </button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
    // import {nextTick} from 'vue'
    import {mapActions,mapState} from "vuex"
    export default{
        methods:{
            addCart(current){
                console.log(current);
                this.ADD_CART(current)
                
            },
            ...mapActions('product',['FETCH_PRODUCT']),
            ...mapActions('cart',['ADD_CART'])
        },
        computed:{
            ...mapState('product',['productData'])
        },
        mounted(){
            this.FETCH_PRODUCT()
        }
    }
</script>